<style lang="less" scoped>
.expand-row {
    margin-bottom: 16px;
}
.ivu-table-body {
    overflow-x: hidden;
}
</style>
<template>
    <div class="expand-row">
        <div class="tool-bar" v-if="oper">
            <Button type="primary" icon="plus" @click="modalAdd=true">添加</Button>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>使用地点</th>
                    <th>使用时间</th>
                    <th>使用数量</th>
                    <th>使用人</th>
                    <th>记录时间</th>
                    <th v-if="oper">操作</th>
                </tr>
            </thead>
            <tbody v-if="infos.length">
                <tr v-for="(x,i) of infos" :key="i">
                    <td>{{i+1}}</td>
                    <td>{{x.useaddr}}</td>
                    <td>{{x.usetime|prettyDate}}</td>
                    <td>{{x.usecount}}</td>
                    <td>{{x.inputname}}</td>
                    <td>{{x.createtime}}</td>
                    <td v-if="oper"><a @click="handleDel(x.id)">删除</a></td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr>
                    <td colspan="5" style="text-align:center;">暂无信息</td>
                </tr>
            </tbody>
        </table>
    
        <Modal v-model="modalAdd" title="运维回填信息">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <Form-item label="使用地点" prop="useaddr">
                    <Input v-model="formValidate.useaddr" placeholder="请输入使用地点"></Input>
                </Form-item>
    
                <Form-item label="使用时间" prop="usetime">
                    <Date-picker type="date" placeholder="选择日期" v-model="formValidate.usetime"></Date-picker>
                </Form-item>
                <Form-item label="使用数量" prop="usecount">
                    <Input-number :max="row.buy_number-row.follow_number" :min="0.1" :step="1" v-model="formValidate.usecount"></Input-number>
                </Form-item>
                <Form-item label="使用人" prop="inputname">
                    <Input v-model="formValidate.inputname" placeholder="请输入使用人"></Input>
                </Form-item>
            </Form>
            <div slot="footer">
                <Button type="primary" size="large" :loading="modal_loading" long @click="handleSubmit('formValidate')">保存</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
export default {
    props: {
        row: Object,
        oper:Boolean
    },
    data() {
        return {
            infos:this.row.infos,
            modalAdd: false,
            modal_loading: false,

            date:'',
            formValidate: {
                useaddr: '',
                usetime: new Date(),
                usecount: 0,
                inputname:''
            },
            ruleValidate: {
                useaddr: [
                    { required: true, message: '使用地点不能为空', trigger: 'blur' }
                ],

                usetime: [
                    { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
                ],

                usecount: [
                    { type: 'number', min: 0.1, message: '请输入使用数量', trigger: 'blur' }
                ]
            },
        }
    },
    computed: {

    },
    mounted() {
        this.formValidate.usecount=this.row.buy_number-this.row.follow_number
    },
    methods: {

        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('提交成功!')
                    this.modal_loading = true
                    this.formValidate.usetime=formatDate(new Date(this.formValidate.usetime))
                    this.formValidate.order_id=this.row.id
                    this.formValidate.order_code=this.row.order_code
                    this.$store.dispatch("saveInfo",this.formValidate).then(resp => {
                        this.modal_loading = false
                        this.$refs[name].resetFields()
                        this.modalAdd = false
                        
                        let info=resp.data.itemMap.info
                        this.infos.push(info)
                        this.syncRow(info.orders)
                    })

                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        handleDel(id){
            let _this=this
            this.$Modal.confirm({
                title:"提示",
                content:"确定要删除当前记录么？",
                onOk(){
                    console.log("del")
                    _this.$store.dispatch("delInfo",{id}).then(resp=>{
                        _this.infos=_.remove(_this.infos,n=>n.id!=id)
                        
                        let info=resp.data.itemMap.info
                        _this.syncRow(info.orders)
                    })
                }
            })
        },
        syncRow(orders){
            this.row.follow_number=orders.follow_number
            this.row.finish=orders.finish
        }
    }
}
</script>
